<template>
   <div>
    
     <template v-if="menuItem.children&&menuItem.children.length>0">
        <el-submenu :index="menuItem.path">
          <template slot="title">
            <i :class="menuItem.icon"></i>
            <span>{{menuItem.title}}</span>
            </template>
            <aside-menu-item v-for="subItem in menuItem.children" :key="subItem._id" :menuItem="subItem"></aside-menu-item>
        </el-submenu>
     </template>
     <template v-else>
        <el-menu-item :index="menuItem.path">
           <i :class="menuItem.icon"></i>
            <span>{{menuItem.title}}</span>
        </el-menu-item>
     </template>
   </div>
</template>

<script>
export default {
    props:['menuItem']
}
</script>

<style>
  .el-menu--collapse  .el-submenu__title span{
    display: none;
  }
  /*隐藏 > */
  .el-menu--collapse  .el-submenu__title .el-submenu__icon-arrow{
    display: none;
  }
  .el-menu--collapse  .el-menu-item span{
    display: none;
  }

</style>